<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>威客任务筛选 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #165DFF;
            --primary-light: #E8F3FF;
            --secondary: #FF7D00;
            --success: #00B42A;
            --danger: #F53F3F;
            --dark: #1D2129;
            --gray: #86909C;
            --light-gray: #F2F3F5;
            --border-color: #E5E6EB;
            --shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--dark);
            background-color: #F7F8FA;
            line-height: 1.6;
            padding-top: 3rem;
            padding-bottom: 5rem;
        }
        
        .main-container {
            display: flex;
            gap: 1.5rem;
        }
        
        .filter-sidebar {
            width: 280px;
            flex-shrink: 0;
        }
        
        .task-content {
            flex-grow: 1;
        }
        
        .section-header {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .section-title {
            font-size: 1.6rem;
            font-weight: 600;
            color: var(--dark);
            margin: 0;
        }
        
        .card {
            border: none;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .card-header {
            background-color: white;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border-color);
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .card-body {
            padding: 1.25rem;
        }
        
        .filter-group {
            margin-bottom: 1.5rem;
        }
        
        .filter-label {
            font-weight: 500;
            margin-bottom: 0.75rem;
            display: block;
        }
        
        .filter-options {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        /* 筛选选项样式 */
        .checkbox-option, .radio-option {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            padding: 0.3rem 0;
        }
        
        .checkbox-option input, .radio-option input {
            accent-color: var(--primary);
        }
        
        .price-range {
            display: flex;
            gap: 0.75rem;
            margin-top: 0.75rem;
        }
        
        .price-input {
            flex: 1;
            position: relative;
        }
        
        .price-input input {
            width: 100%;
            padding: 0.5rem 0.75rem 0.5rem 2rem;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 0.9rem;
        }
        
        .price-input::before {
            content: '¥';
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .search-input {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .search-input input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 0.95rem;
        }
        
        .search-input i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        /* 标签筛选 */
        .tag-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
        
        .tag-chip {
            background-color: var(--light-gray);
            border: 1px solid transparent;
            border-radius: 20px;
            padding: 0.4rem 1.2rem;
            font-size: 0.9rem;
            color: var(--dark);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .tag-chip:hover, .tag-chip.active {
            background-color: var(--primary-light);
            color: var(--primary);
            border-color: var(--primary);
        }
        
        .tag-chip i {
            font-size: 0.8rem;
        }
        
        /* 活跃筛选器 */
        .active-filters {
            background-color: var(--primary-light);
            border-radius: 6px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .active-filters h5 {
            font-size: 0.95rem;
            margin-bottom: 0.75rem;
            color: var(--primary);
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .filter-tag {
            background-color: white;
            border-radius: 16px;
            padding: 0.25rem 0.75rem;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .filter-tag-remove {
            color: var(--gray);
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        .filter-tag-remove:hover {
            color: var(--danger);
        }
        
        /* 任务列表样式 */
        .task-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .task-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .task-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .task-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
            background-color: var(--light-gray);
        }
        
        .task-info {
            padding: 1rem;
        }
        
        .task-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }
        
        .task-title:hover {
            color: var(--primary);
        }
        
        .task-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--gray);
            margin-bottom: 0.75rem;
        }
        
        .task-price {
            color: var(--success);
            font-weight: 600;
            margin-bottom: 0.75rem;
        }
        
        .task-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border-color);
            font-size: 0.85rem;
        }
        
        .task-author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .task-actions {
            display: flex;
            gap: 0.75rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        /* 按钮样式 */
        .btn {
            padding: 0.5rem 1.25rem;
            border-radius: 4px;
            font-weight: 500;
            transition: var(--transition);
            border: none;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #0E4CD1;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--dark);
        }
        
        .btn-outline:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .btn-sm {
            padding: 0.3rem 0.75rem;
            font-size: 0.85rem;
        }
        
        .filter-actions {
            display: flex;
            gap: 0.75rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-container {
                flex-direction: column;
            }
            
            .filter-sidebar {
                width: 100%;
            }
            
            .filter-sidebar .card {
                overflow: hidden;
            }
            
            .collapsible {
                cursor: pointer;
            }
            
            .filter-content {
                display: none;
            }
            
            .filter-content.show {
                display: block;
            }
            
            .task-list {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
        }
        
        @media (max-width: 576px) {
            .task-list {
                grid-template-columns: 1fr;
            }
            
            .price-range {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .tag-filters {
                gap: 0.5rem;
            }
            
            .tag-chip {
                padding: 0.3rem 0.8rem;
                font-size: 0.85rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="section-header">
            <h1 class="section-title">威客任务搜索与筛选</h1>
        </div>
        
        <div class="main-container">
            <!-- 筛选侧边栏 -->
            <div class="filter-sidebar">
                <div class="card">
                    <div class="card-header collapsible" data-target="basic-filters">
                        <span>基本筛选</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="card-body filter-content show" id="basic-filters">
                        <div class="search-input">
                            <i class="fas fa-search"></i>
                            <input type="text" placeholder="搜索任务关键词...">
                        </div>
                        
                        <div class="filter-group">
                            <label class="filter-label">任务类型</label>
                            <div class="filter-options">
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 设计创意
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 程序开发
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 文案写作
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 营销推广
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 视频制作
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 翻译服务
                                </label>
                            </div>
                        </div>
                        
                        <div class="filter-group">
                            <label class="filter-label">价格范围</label>
                            <div class="price-range">
                                <div class="price-input">
                                    <input type="number" placeholder="最低" min="0">
                                </div>
                                <div class="price-input">
                                    <input type="number" placeholder="最高" min="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="filter-group">
                            <label class="filter-label">任务状态</label>
                            <div class="filter-options">
                                <label class="radio-option">
                                    <input type="radio" name="status" checked> 全部状态
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="status"> 进行中
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="status"> 已完成
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header collapsible" data-target="advanced-filters">
                        <span>高级筛选</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="card-body filter-content" id="advanced-filters">
                        <div class="filter-group">
                            <label class="filter-label">发布时间</label>
                            <div class="filter-options">
                                <label class="radio-option">
                                    <input type="radio" name="time" checked> 不限
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="time"> 今天
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="time"> 近3天
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="time"> 近7天
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="time"> 近30天
                                </label>
                            </div>
                        </div>
                        
                        <div class="filter-group">
                            <label class="filter-label">难度级别</label>
                            <div class="filter-options">
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 入门级
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 进阶级
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 专业级
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 专家级
                                </label>
                            </div>
                        </div>
                        
                        <div class="filter-group">
                            <label class="filter-label">交付周期</label>
                            <div class="filter-options">
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 1-3天
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 4-7天
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 8-15天
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox" checked> 15天以上
                                </label>
                            </div>
                        </div>
                        
                        <div class="filter-group">
                            <label class="filter-label">服务商要求</label>
                            <div class="filter-options">
                                <label class="checkbox-option">
                                    <input type="checkbox"> 实名认证
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox"> 企业认证
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox"> 技能等级 ≥3级
                                </label>
                                <label class="checkbox-option">
                                    <input type="checkbox"> 好评率 ≥95%
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-body">
                        <div class="filter-actions">
                            <button class="btn btn-primary btn-sm w-100">应用筛选</button>
                        </div>
                        <div class="filter-actions mt-2">
                            <button class="btn btn-outline btn-sm w-100">重置筛选</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 任务内容区 -->
            <div class="task-content">
                <!-- 快捷标签筛选 -->
                <div class="tag-filters">
                    <div class="tag-chip active">
                        <i class="fas fa-thumbtack"></i> 全部任务
                    </div>
                    <div class="tag-chip">
                        <i class="fas fa-bolt"></i> 紧急
                    </div>
                    <div class="tag-chip">
                        <i class="fas fa-trophy"></i> 精选
                    </div>
                    <div class="tag-chip">
                        <i class="fas fa-money-bill-wave"></i> 高报酬
                    </div>
                    <div class="tag-chip">
                        <i class="fas fa-clock"></i> 新发布
                    </div>
                    <div class="tag-chip">
                        <i class="fas fa-hand-holding-heart"></i> 适合新手
                    </div>
                </div>
                
                <!-- 活跃筛选器 -->
                <div class="active-filters">
                    <h5>当前筛选条件</h5>
                    <div class="filter-tags">
                        <div class="filter-tag">
                            设计创意 <i class="fas fa-times filter-tag-remove"></i>
                        </div>
                        <div class="filter-tag">
                            程序开发 <i class="fas fa-times filter-tag-remove"></i>
                        </div>
                        <div class="filter-tag">
                            价格: ¥500-¥5000 <i class="fas fa-times filter-tag-remove"></i>
                        </div>
                        <div class="filter-tag">
                            近7天 <i class="fas fa-times filter-tag-remove"></i>
                        </div>
                        <div class="filter-tag">
                            <a href="#" style="color: var(--primary);">清除全部</a>
                        </div>
                    </div>
                </div>
                
                <!-- 排序选项 -->
                <div class="card mb-4">
                    <div class="card-body p-3 d-flex justify-content-between align-items-center">
                        <div class="text-sm text-gray">找到 128 个相关任务</div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-sm">排序方式:</span>
                            <select class="form-select form-select-sm" style="width: auto;">
                                <option>推荐排序</option>
                                <option>最新发布</option>
                                <option>价格从高到低</option>
                                <option>价格从低到高</option>
                                <option>参与人数多</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- 任务列表 -->
                <div class="task-list">
                    <!-- 任务1 -->
                    <div class="task-card">
                        <img src="https://picsum.photos/seed/task1/400/300" alt="Logo设计任务" class="task-image">
                        <div class="task-info">
                            <a href="#" class="task-title">企业Logo设计，现代简约风格，突出科技感</a>
                            <div class="task-meta">
                                <span><i class="far fa-eye"></i> 248</span>
                                <span><i class="far fa-comment"></i> 36</span>
                            </div>
                            <div class="task-price">¥1,500</div>
                            <div class="task-footer">
                                <div class="task-author">
                                    <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="author-avatar">
                                    <span>创意工作室</span>
                                </div>
                                <div class="task-actions">
                                    <button class="action-btn"><i class="far fa-heart"></i></button>
                                    <button class="action-btn"><i class="far fa-bookmark"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 任务2 -->
                    <div class="task-card">
                        <img src="https://picsum.photos/seed/task2/400/300" alt="网站开发任务" class="task-image">
                        <div class="task-info">
                            <a href="#" class="task-title">电商网站首页改版设计与前端实现</a>
                            <div class="task-meta">
                                <span><i class="far fa-eye"></i> 512</span>
                                <span><i class="far fa-comment"></i> 78</span>
                            </div>
                            <div class="task-price">¥8,000</div>
                            <div class="task-footer">
                                <div class="task-author">
                                    <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="author-avatar">
                                    <span>电商平台</span>
                                </div>
                                <div class="task-actions">
                                    <button class="action-btn"><i class="far fa-heart"></i></button>
                                    <button class="action-btn"><i class="far fa-bookmark"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 任务3 -->
                    <div class="task-card">
                        <img src="https://picsum.photos/seed/task3/400/300" alt="文案撰写任务" class="task-image">
                        <div class="task-info">
                            <a href="#" class="task-title">教育类APP产品文案撰写，包括功能介绍和宣传语</a>
                            <div class="task-meta">
                                <span><i class="far fa-eye"></i> 186</span>
                                <span><i class="far fa-comment"></i> 24</span>
                            </div>
                            <div class="task-price">¥2,000</div>
                            <div class="task-footer">
                                <div class="task-author">
                                    <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="author-avatar">
                                    <span>教育机构</span>
                                </div>
                                <div class="task-actions">
                                    <button class="action-btn"><i class="far fa-heart"></i></button>
                                    <button class="action-btn"><i class="far fa-bookmark"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 任务4 -->
                    <div class="task-card">
                        <img src="https://picsum.photos/seed/task4/400/300" alt="短视频制作任务" class="task-image">
                        <div class="task-info">
                            <a href="#" class="task-title">产品宣传短视频制作，15-30秒</a>
                            <div class="task-meta">
                                <span><i class="far fa-eye"></i> 324</span>
                                <span><i class="far fa-comment"></i> 42</span>
                            </div>
                            <div class="task-price">¥3,000</div>
                            <div class="task-footer">
                                <div class="task-author">
                                    <img src="https://picsum.photos/seed/user4/100/100" alt="用户头像" class="author-avatar">
                                    <span>美妆品牌</span>
                                </div>
                                <div class="task-actions">
                                    <button class="action-btn"><i class="far fa-heart"></i></button>
                                    <button class="action-btn"><i class="far fa-bookmark"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <nav class="mt-5 d-flex justify-content-center">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 侧边栏筛选器折叠功能
            const collapsibles = document.querySelectorAll('.collapsible');
            collapsibles.forEach(collapsible => {
                collapsible.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const targetContent = document.getElementById(targetId);
                    const icon = this.querySelector('i');
                    
                    targetContent.classList.toggle('show');
                    icon.classList.toggle('fa-chevron-up');
                    icon.classList.toggle('fa-chevron-down');
                });
            });
            
            // 标签筛选功能
            const tagChips = document.querySelectorAll('.tag-chip');
            tagChips.forEach(chip => {
                chip.addEventListener('click', function() {
                    this.classList.toggle('active');
                    // 实际应用中，这里会触发筛选逻辑
                });
            });
            
            // 活跃筛选标签移除功能
            const removeButtons = document.querySelectorAll('.filter-tag-remove');
            removeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.closest('.filter-tag').remove();
                    // 实际应用中，这里会更新筛选条件
                });
            });
            
            // 复选框和单选按钮筛选逻辑
            const filterInputs = document.querySelectorAll('.filter-options input');
            filterInputs.forEach(input => {
                input.addEventListener('change', function() {
                    // 实际应用中，这里会实时更新筛选结果
                    console.log('筛选条件已更新');
                });
            });
            
            // 模拟筛选应用
            document.querySelector('.btn-primary').addEventListener('click', function() {
                // 实际应用中，这里会收集所有筛选条件并发送请求
                alert('筛选条件已应用，共找到 128 个相关任务');
            });
            
            // 重置筛选
            document.querySelector('.btn-outline').addEventListener('click', function() {
                // 重置所有复选框和单选按钮
                document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                    checkbox.checked = true;
                });
                document.querySelectorAll('input[type="radio"]').forEach((radio, index) => {
                    if (index === 0) radio.checked = true;
                    else radio.checked = false;
                });
                document.querySelectorAll('input[type="number"]').forEach(input => {
                    input.value = '';
                });
                document.querySelector('input[type="text"]').value = '';
                
                // 重置标签筛选
                tagChips.forEach(chip => {
                    chip.classList.remove('active');
                    if (chip.textContent.includes('全部任务')) {
                        chip.classList.add('active');
                    }
                });
                
                alert('所有筛选条件已重置');
            });
        });
    </script>
</body>
</html>
    
